<template>
  <label class="m-radio" :class="{'is-checked':isChecked,'is-disabled':disabled}">
    <span class="m-radio__input" :class="{'is-checked':isChecked}">
      <span class="m-radio__inner"></span>
      <input class="m-radio__radio" :value="identify" v-model="model" type="radio" :disabled="disabled"/>
    </span>
    <span class="m-radio__label">
      <slot>
        {{label}}
      </slot>
    </span>
  </label>
</template>

<script>
export default {
  name: 'Radio',
  componentName: 'Radio',
  props: {
    value: null,
    identify: null,
    label: null,
    disabled:Boolean
  },
  computed: {
    isChecked() {
      return this.identify === this.value
    },
    model: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
        this.$emit('change', val)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
$size: 14px;
$colorDisbaled:#c0c4cc;

.m-radio {
  display: inline-block;
  font-size: 14px;
  cursor: pointer;

  &.is-disabled{
    cursor: not-allowed;
    color: $colorDisbaled;
  }

  &__radio {
    position: absolute;
    z-index: -1;
    width: 0;
    height: 0;
    opacity: 0;
  }

  &__input {
    position: relative;
    display: inline-block;
    width: $size;
    height: $size;
    border-radius: 50%;
    border: 1px solid #d6d6d6;
    box-sizing: border-box;
    background: #fff;
    line-height: 1;
    vertical-align: middle;
    &.is-checked {
      background-color: #4779f4;
      position: relative;
      border: none;
      &:after {
        $size: 4px;
        content: '';
        display: inline-block;
        width: $size;
        height: $size;
        border-radius: 50%;
        background: #fff;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -$size/2;
        margin-top: -$size/2;
      }
    }
  }

  &__label{
    line-height: 1;
    vertical-align: middle;
  }
}
</style>
